<template>
  <div id="app" :class="{ 'large-font': isLargeFont }">
    <router-view />
    <SpeechAssistant />
  </div>
</template>

<script>
import SpeechAssistant from './components/SpeechAssistant.vue';
import fontSizeStore from './common/fontSizeStore.js';
import { loadStyleSheet, initializeStyle } from './common/styles/styleLoader.js';
import { watch } from 'vue';

export default {
  components: {
    SpeechAssistant
  },
  data() {
    return {
      isLargeFont: false
    };
  },
  created() {
    // 初始化字体大小状态
    this.isLargeFont = initializeStyle();
    
    // 提供全局字体大小状态，但不在同一组件中使用
    fontSizeStore.provideFontSize();
    
  },
  methods: {
    toggleFontSize() {
      // 直接使用fontSizeStore中的方法来切换字体大小，而不是通过inject
      // 因为App是根组件，不应该使用inject获取provide的值
      this.isLargeFont = !this.isLargeFont;
      localStorage.setItem('isLargeFont', this.isLargeFont ? 'true' : 'false');
      loadStyleSheet(this.isLargeFont);
    }
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>
